{% load static %}
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta http-equiv = "x-ua-compatiable" content = "ie=edge">
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel = "stylesheet" href = "{% static 'css/bootstrap.min.css' %}">
    <title>Title</title>
</head>
<body>
    <!-- 顶部导航---开始-->
    <nav class = "navbar fixed-top navbar-expand-lg bg-dark navbar-dark">

        <a href = "#" class = "navbar-brand">
            永锋复印机配件（深圳）有限公司
        </a>
    </nav>
    <!-- 顶部导航--结束-->
    <!-- 左菜单栏--开始-->

    <div class = "container" style = "margin-top: 60px;">
        <div class = "row">
            <div class = "col-md-2" id = "left-menulist">
                <div id = "accordion">
                    <div class = "card text-center">
                        <div class = "card-header">
                            <a class = "card-link" data-toggle = "collapse" href = "#collapseOne">
                                工时管理
                            </a>
                        </div>
                        <div id = "collapseOne" class = "collapse show" data-parent = "#accordion">
                            <div class = "list-group">
                                <a href = "javascript:;" class = "list-group-item list-group-item-action"
                                   onclick = "loadPage('/employee_hours/')">
                                    人员工时
                                </a>
                                <a href = "javascript:;" class = "list-group-item list-group-item-action"
                                   onclick = "loadPage('/machine_hours/')">
                                    设备机时
                                </a>

                            </div>
                        </div>
                    </div>
                    <div class = "card text-center">
                        <div class = "card-header">
                            <a class = "collapsed card-link " data-toggle = "collapse" href = "#collapseTwo">
                                基础数据
                            </a>
                        </div>
                        <div id = "collapseTwo" class = "collapse" data-parent = "#accordion">
                            <ul class = "list-group">
                                <a class = "list-group-item list-group-item-action" href = "javascript:;"
                                   onclick = "loadPage('/employee_list/')">
                                    员工表
                                </a>
                                <a class = "list-group-item list-group-item-action" href = "javascript:;"
                                   onclick = "loadPage('/process_list/')">
                                    工序表
                                </a>
                                <a class = "list-group-item list-group-item-action" href = "javascript:;"
                                   onclick = "loadPage('/device_list/')">
                                    设备表
                                </a>
                                <a class = "list-group-item list-group-item-action" href = "javascript:;"
                                   onclick = "loadPage('/devicetype_list/')">
                                    设备类型表
                                </a>
                            </ul>
                        </div>
                    </div>
                    <div class = "card text-center">
                        <div class = "card-header">
                            <a class = "collapsed card-link disabled" data-toggle = "collapse" href = "#">
                                设置
                            </a>
                        </div>
                        <div id = "collapseThree" class = "collapse" data-parent = "#accordion">
                            <ul class = "list-group">
                                <li class = "list-group-item list-group-item-success">成功列表项</li>
                                <li class = "list-group-item list-group-item-secondary">次要列表项</li>
                                <li class = "list-group-item list-group-item-info">信息列表项</li>
                                <li class = "list-group-item list-group-item-warning">警告列表项</li>
                                <li class = "list-group-item list-group-item-danger">危险列表项</li>
                                <li class = "list-group-item list-group-item-primary">主要列表项</li>
                                <li class = "list-group-item list-group-item-dark">深灰色列表项</li>
                                <li class = "list-group-item list-group-item-light">浅色列表项</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 左菜单栏--结束-->
            <!-- 右内容区域--开始-->
            <div class = "col-md-10" id = "right-context">
                <div class = "container">
                    <div class = "row">
                        <div class = "col-md-12">

                            <div class = "jumbotron text-center" style = "margin-bottom: 0">
                                <h1>我的第一个 Bootstrap 4 页面</h1>
                                <p>重置浏览器窗口大小查看效果！</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- 右内容区域--结束-->
        </div>
    </div>
    <!-- 底部jumbotron--开始-->
    <div class = "jumbotron text-center" style = "margin-bottom: 0">
        <p>底部内容</p>
    </div>
    <!-- 底部jumbotron--结束-->

    <!-- Bootstrap 所必须的jQuery以及Bootstrap的js文件 必须按这个顺序引入-->
    <script src = "{% static 'js/jquery-3.5.1.min.js' %}"></script>
    <script src = "{% static 'js/bootstrap.bundle.min.js' %}"></script>
    <script>



        function loadPage(url) {
            var url0 = document.URL;
            var num = url0.indexOf('?');
            var oldurl;
            if (num == -1) {
                oldurl = url0;
            } else {
                oldurl = url0.slice(0, num);
            }
            var newurl = oldurl + '?' + url;
            history.pushState(null, null, newurl);
            var ajaxurl = url
            $.ajax({
                type: "post",
                url: ajaxurl,
                success: function (html) {
                    $('#right-context').html(html);
                }
            });
        }
    </script>

</body>
</html>

